<template>
    <div class="cart">
        <div class="header displayFlex">
            <span class="iconfont icon-arrows_left back-icon" @click="toBackUrl()"></span>
            <span class="cart-title flex1">购物车</span>
            <span></span>
        </div>
        <div class="cart-buy-btn">
            <div class="goods-items">
                <select-cart
                        v-if="cartMoudleMsg && Object.keys(cartMoudleMsg).length > 0"
                        ref="selectCart"
                        @deleteItem="deleteItem"
                        @batchDelete="batchDelete"
                        @isSelectAll="isSelectAll"
                        @refreshBuyBar="refreshBuyBar"
                        :cartMoudleProp="cartMoudleMsg">
                </select-cart>
                <div class="cartNone" v-else>
                    <img :src="staticImageUrl('/images/cartNone.png')" alt="">
                    <div>暂无相关的订单哦</div>
                </div>
            </div>
        </div>
        <buy-bar
                :buyBarProp="buyBarMsg"
                @toPay="gotoSureOrder"
                @isSelectAll="isSelectAll"
                v-if="buyBarMsg && Object.keys(buyBarMsg).length > 0"
                @selectAllFn="selectAllFn">input-box displayFlex flexCenter activity-remind-btn
        </buy-bar>
        <goods-specification class="goods-specification" ref="goodsSpecification"
                             v-if="showGoodsStyle"></goods-specification>
        <!--<module-bord class="delet-module" v-if="showDeleteItem">-->
        <!--<span @click="deleteItem" class="delete-text">删除</span>-->
        <!--</module-bord>-->
        <comfirm-bord class="send-way" v-if="false"></comfirm-bord>
    </div>
</template>

<script>
    import {MessageBox} from 'mint-ui';

    export default {
        name: "Cart",
        data() {
            return {
                inputNumber: 1,
                showGoodsStyle: false,
                buyBarMsg: {},
                cartMoudleMsg: {
                    // "cartStoreInfos": [         //---------购物车店铺分类列表
                    //     {
                    //         "storeId": 102,
                    //         "storeName": "王者动物园",
                    //         "storeLogo": "https://oss.pg.yibaotong/fc1a365d0.png",
                    //         "supportExpress": true,             //---------是否支持快递
                    //         "selectAll": false, //是否本店所有商品选中
                    //         "cartItemInfos": [              //---------购物车内店铺商品列表
                    //             {
                    //                 "id": 1,        //----------购物车商品id,调删除接口时使用
                    //                 "itemId": 124,
                    //                 "selected": false,
                    //                 "itemCode": "ddd",          //------------商品货号
                    //                 "itemTitle": "磕破一卡通卡关于推进\n\n\n",
                    //                 "quantity": 498,        //--------商品总库存
                    //                 "images": [
                    //                     "https://oss.pg.yibaoton/5967100.gif",
                    //                     "https://oss.pg.yib/432875100.png"
                    //                 ],
                    //                 "saleMode": 1,          //-----------售出方式 0-单款  1-多款
                    //                 "maxBuyNum": 5,          //------------个人可购买的最大数量(单款有效)
                    //                 "maxWarn": "此商品限购5件",          //------------超过最大购买数时的预警文案(单款有效)
                    //                 "itemServerals": [
                    //                     {
                    //                         "styleName": "a",               //-----------款名
                    //                         "styleImg": "https://oss.pg.yibao/100.png",         //-----------款式图
                    //                         "price": "100",         //-----------售价
                    //                         "quantity": 484,        //-----------款库存,为0则置灰
                    //                         "maxBuyNum": 5,         //------------个人可购买的最大数量
                    //                         "maxWarn": "此商品限购5件"         //------------超过最大购买数时的预警文案
                    //                     },
                    //                     {
                    //                         "styleName": "b",
                    //                         "styleImg": "https://oss.pgne/102975436100.png",
                    //                         "price": "2500",
                    //                         "quantity": 484,
                    //                         "maxBuyNum": 5,
                    //                         "maxWarn": "此商品限购5件"
                    //                     }
                    //                 ],
                    //                 "styleName": "a",       //---------当前选中的款式
                    //                 "price": "100",         //---------用户已选购的商品单价
                    //                 "buyNum": 2         //-----------购买数量
                    //             }
                    //         ]
                    //     }
                    // ],
                    // "invalidStoreInfos": [          //------失效的店铺商品列表
                    //     {
                    //         "storeId": 102,
                    //         "storeName": "王者动物园",
                    //         "storeLogo": "https://oss.pg.yiba/365d0.png",
                    //         "invalidItemInfos": [
                    //             {
                    //                 "id": 2,            //----------购物车商品id
                    //                 "itemId": 2223,
                    //                 "itemImg": "https://oss.pg.y/854100.png",
                    //                 "title": "联系我哦",
                    //                 "invalidDesc": "宝贝已下架"        //-------------失效描述
                    //             }
                    //         ]
                    //     }
                    // ]
                }
            }
        },
        mounted() {
            /*如果没有登录去登录*/
            if (!this.userId) {
                this.toPhoneLogin();
            }
            this.initCart();
        },
        methods: {
            /*初始化购物车信息*/
            initCart() {
                let that = this;
                this.$store.dispatch('initCartModuleMsg').then((data)=>{
                    that.cartMoudleMsg = that.$store.state.cart.cartMoudleMsg;
                    that.initBuyBar();
                });
            },
            /*删除购物车商品*/
            deleteItem(obj) {
                let that = this;
                MessageBox({
                    title: '',
                    message: '确定要删除此件商品吗',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '我再想想',
                }).then((data) => {
                    if (data == 'confirm') {
                        that.$store.commit('deleteCartItem',obj);
                    }
                })
            },
            /*批量删除购物车商品*/
            batchDelete(deleteArray) {
                let url = `${this.NW_API_API_LOCALE_VERSION}/shopping/cart/user/${this.userId}/batch/delete`;
                let params = {
                    ids: deleteArray
                };
                this.xurl.postDataJsonLoading(url, params).then((data) => {
                    if (data.success) {
                        this.cartMoudleMsg.invalidStoreInfos = [];
                        this.cartMoudleMsg = Object.assign({}, this.cartMoudleMsg)
                    } else if (data.errMsg) {
                        this.$root.$emit('toast', {msg: data.errMsg});
                    } else {
                        this.$root.$emit('toast', {msg: '删除商品失败'});
                    }
                })
            },
            changeInputNumber(val) {
                this.inputNumber = val;
            },
            // refreshSelect(){
            //     this.cartMoudleMsg
            // },
            initBuyBar(msg) {
                this.buyBarMsg = {
                    selectAll: false,//是否全选
                    totalMoney: 0,//总金额
                    payMoney:{
                        money:0,
                        text:'总额'
                    },//商品总金额
                    shippingFee:{
                        isShow:true,
                        money:0,
                    },//邮费、配送费用
                    warnText: '',
                }
                console.log(this.buyBarMsg);
            },
            refreshBuyBar(obj) {
                this.buyBarMsg = Object.assign({}, this.buyBarMsg, obj);
            },
            gotoSureOrder() {
                let that = this;
                let isNoOneSelected = true;
                let selectLength = 0;
                let supportExpressLength = 0;
                that.cartMoudleMsg.cartStoreInfos.forEach((value, index) => {
                    value.cartItemInfos.forEach((cartItemInfosValue, cartItemInfosIndex) => {
                        // if( that.cartMoudleMsg.cartStoreInfos[index].cartItemInfos[cartItemInfosIndex].selected ){
                        if( cartItemInfosValue.selected ){
                            isNoOneSelected = false;
                            /*此选择商品是否支持快递*/
                            selectLength ++;
                            if(value.supportExpress || value.supportExpress == 'true'){
                                supportExpressLength ++;
                            }
                        }
                    })
                });
                if( isNoOneSelected ){
                    this.$root.$emit('toast',{'msg':'请选择要结算的商品'});
                    return
                }
                console.log(supportExpressLength);
                console.log(selectLength);
                if( supportExpressLength != 0 && selectLength != supportExpressLength ){
                    MessageBox({
                        title: '',
                        message: '需要快递配送的商品请单独结算',
                        showCancelButton: true,
                        confirmButtonText: '统一自提',
                        cancelButtonText: '重新选择',
                    }).then((data) => {
                        if (data == 'confirm') {
                            that.selectGoodsItems();
                            window.location.href = '/order/sure'
                            // this.$router.push('/order/sure');
                        }
                    })
                    return;
                }else if( supportExpressLength != 0 && selectLength == supportExpressLength ){
                    that.selectGoodsItems();
                    // this.$router.push('/order/sure');
                    window.location.href = '/order/sure'
                }else if(supportExpressLength == 0){
                    MessageBox({
                        title: '',
                        message: '所选商品不支持配送',
                        showCancelButton: true,
                        confirmButtonText: '确认自提',
                        cancelButtonText: '重新选择',
                    }).then((data) => {
                        if (data == 'confirm') {
                            that.selectGoodsItems();
                            // this.$router.push('/order/sure');
                            window.location.href = '/order/sure'

                        }
                    })
                    return;
                }
            },
            selectGoodsItems() {
                let that = this;
                let tempArray = [];
                let obj = {};
                let cartStoreInfos = this.$refs.selectCart.cartMoudleMsg.cartStoreInfos;
                cartStoreInfos.forEach((cartStoreInfoValue,cartStoreInfoIndex)=>{
                    cartStoreInfoValue.cartItemInfos.forEach((cartItemInfoValue,cartItemInfoIndex)=>{
                        if(cartItemInfoValue.selected){
                            obj = {
                                itemId:cartItemInfoValue.itemId,
                                buyNum:cartItemInfoValue.buyNum,
                                styleName:cartItemInfoValue.styleName,
                            }
                            tempArray.push(obj);
                        }
                    });
                })
                that.$store.commit('sureOrder',tempArray);
            },
            selectAllFn(boolean) {
                let that = this;
                if(that.$store.state.cart.cartMoudleMsg.cartStoreInfos){
                    that.$store.state.cart.cartMoudleMsg.cartStoreInfos.forEach((value, index) => {
                        that.$store.state.cart.cartMoudleMsg.cartStoreInfos[index].selectAll = boolean;
                        value.cartItemInfos.forEach((cartItemInfosValue, cartItemInfosIndex) => {
                            that.$store.state.cart.cartMoudleMsg.cartStoreInfos[index].cartItemInfos[cartItemInfosIndex].selected = boolean;
                        })
                    });
                    that.$store.state.cart.cartMoudleMsg.cartStoreInfos.splice(0, 1, that.$store.state.cart.cartMoudleMsg.cartStoreInfos[0]);
                }
                this.$refs.selectCart.refreshBuyBar();

            },
            isSelectAll(boolean) {
                this.buyBarMsg.selectAll = boolean;
                this.buyBarMsg = Object.assign({}, this.buyBarMsg);
            }
        },
        watch:{
            '$store.state.cart.cartMoudleMsg'(val){
                this.cartMoudleMsg = val
            }
        },
        /*E:\program\v-nw-h5\src\pages\store\components\goods\GoodsSpecification.vue*/
        components: {
            'select-cart': () => import('./components/SelectCart'),
            'goods-specification': () => import('../store/components/goods/GoodsSpecification'),
            'module-bord': () => import('../../components/commonComponents/alert/ModuleBord'),
            'comfirm-bord': () => import('../../components/commonComponents/alert/comfirm/BtnsBrd5'),
            'buy-bar': () => import('../../components/commonActModel/buyBar/goodsBuyBar'),
        }
    }
</script>

<style scoped lang="scss">
    .send-way /deep/ {
        .confirm-btn {
            font-size: .15rem;
        }
    }
    .goods-items /deep/ {
        .no-wcomment {
            z-index: 1;
            height: 5.77rem;
            height: 80vh;
            height: calc(100vh - .9rem);
        }
    }

    .delet-module /deep/ {
        .module-bord-content {
            padding: 0;
            width: 2.4rem;
            height: .45rem;
            text-align: center;
            line-height: .45rem;
            font-size: .15rem;
            color: #FF3333;
        }

    }
    .cart-buy-btn{
        padding-top: .5rem;
    }
    .header{
        padding: 0 .15rem;
        height: .5rem;
        line-height: .5rem;
        border-bottom: 1px solid #F0F0F0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index:1;
        background-color: #fff;
    }
    .back-icon{
        font-weight: bold;
        font-size: .24rem;
        padding: 0 .05rem;
    }
    .cart-title{
        font-size: .16rem;
        text-align: center;
    }
    .cartNone{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 0.2rem;
        text-align: center;
        img{
            width: 50%;
            height: 50%;
        }
        div{
            font-size: 0.16rem;
            color: #b8b8ba;
        }
    }
</style>